<template>
  <div class="echarts-outer-wrapper width-620">
    <Title
      title="首贷中心（分行业）"
      time="4"
      timePosition="left"
      dw="单位：户次"
    ></Title>
    <div ref="echarts" style="height: 368px">
      <echartCompt class="echarts-chart" v-model="chartOption" />
    </div>
  </div>
</template>
<script>
const FullYear = new Date().getFullYear();
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      yearData: "2022",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  computed: {
    chartOption() {
      let barWidth = 60;
      let colorList = ["rgba(243, 255, 36, 1)", "rgba(255, 180, 106, 1)"];
      var xdata = [];
      var data1 = [];
      var data2 = [];
      if (this.EchartData) {
        this.EchartData.bnqkList.map((item, index) => {
          xdata.push(item.hymlmc);
          data1.push(this.EchartData.tqqkList[index].tghc);
          data2.push(item.tghc);
        });
      }

      let option = {
        dataZoom: echartOption.dataZoomBottom(5),
        tooltip: echartOption.tooltip({
          formatter: function (params) {
            // console.log(params);
            return [
              `<div style="color:${echartOption.tooltipTextColor}>${params[0].name}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[0]};border-radius:16px"></span>${params[0].seriesName}:${params[0].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[1]};border-radius:16px"></span>${params[1].seriesName}:${params[1].value}</div>`,
            ].join("");
          },
        }),
        grid: {
          top: 80,
          left: 48,
          right: 48,
          bottom: 36,
          containLabel: true,
        },
        legend: echartOption.echartLegend([
          { name: this.yearData[1] + "年", icon: "roundRect" },
          { name: this.yearData[0] + "年", icon: "roundRect" },
        ]),
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(0, (params) => {
            if (params.length > 4) {
              params = params.slice(0, 4) + "...";
            }
            return params;
          }),
          boundaryGap: true,
        },
        yAxis: {
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
          splitArea: { show: false },
        },
        series: [
          {
            name: this.yearData[1] + "年",
            type: "pictorialBar",
            barWidth: barWidth,
            symbolOffset: ["-20%", 0],
            symbol:
              "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
            data: [13, 54, 71, 24, 57, 33, 45],
            data: data2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0.8,
                    color: "rgba(18, 61, 139, 1)",
                  },
                  {
                    offset: 0.2,
                    color: "rgba(243, 255, 36, 1)",
                  },
                ]),
              },
            },
          },
          {
            name: this.yearData[0] + "年",
            type: "pictorialBar",
            barWidth: barWidth,
            symbolOffset: ["20%", 0],
            symbol:
              "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
            data: [13, 54, 71, 24, 57, 33, 45],
            data: data1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0.8,
                    color: "rgba(18, 61, 139, 1)",
                  },
                  {
                    offset: 0.2,
                    color: "rgba(255, 180, 106, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      return option;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
    },
    getData() {
      this.ajax({
        url: "/dpzsGzcxService/sdzxFhyQuery",
        method: "post",
        data: {
          param: {
            tqnd: FullYear - 1,
            dqnd: FullYear,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.EchartData = res.data;
        this.yearData = [
          this.EchartData.tqqkList[0].ssnd,
          this.EchartData.bnqkList[0].ssnd,
        ];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 614px;
  height: 422px;
}
.echarts-chart {
  height: 100%;
  width: 100%;
}
</style>
